import { init } from '../../build/package/init.js'
import { classModule } from '../../build/package/modules/class.js'
import { propsModule } from '../../build/package/modules/props.js'
import { styleModule } from '../../build/package/modules/style.js'
import { eventListenersModule } from '../../build/package/modules/eventlisteners.js'
import { h } from '../../build/package/h.js'
import originalData from "./data.js";

class Page {
  constructor() {
    this.patch = init([classModule, propsModule, styleModule, eventListenersModule])
    this.margin = 8;
    this.sortBy = 'rank';
    this.totalHeight = 0;
    this.margin = 8;
    this.nextKey = 11;
    this.data = [...originalData];
    this.vnode = this.patch(document.getElementById('container'), this.view(this.data));
  }

  changeSort = (prop) => {
    this.sortBy = prop;
    this.data.sort((a, b) => {
      if (a[prop] > b[prop]) {
        return 1
      }
      if (a[prop] < b[prop]) {
        return -1
      }
      return 0
    })
    this.render()
  }

  add = () => {
    const n = originalData[Math.floor(Math.random() * 10)]
    this.data = [{ rank: this.nextKey++, title: n.title, desc: n.desc, elmHeight: 0 }].concat(this.data)
    this.render();
    this.render();
  }

  remove (movie) {
    this.data = this.data.filter(m => m !== movie);
    this.render();
  }

  view = (data) => h('div', [
    h('h1', 'Top 10 movies'),
    h('div', [
      h('a.btn.add', { on: { click: this.add } }, 'Add'),
      'Sort by: ',
      h('span.btn-group', [
        h('a.btn.rank', { class: { active: this.sortBy === 'rank' }, on: { click: () => { this.changeSort('rank') } } }, 'Rank'),
        h('a.btn.title', { class: { active: this.sortBy === 'title' }, on: { click: () => { this.changeSort('title') } } }, 'Title'),
        h('a.btn.desc', { class: { active: this.sortBy === 'desc' }, on: { click: () => { this.changeSort('desc') } } }, 'Description'),
      ]),
    ]),
    h('div.list', { style: { height: this.totalHeight + 'px' } },  data.map(this.movieView)),
  ]);

  movieView = (movie) => h('div.row', {
    key: movie.rank,
    style: {
      opacity: '0',
      transform: 'translate(-200px)',
      delayed: { transform: `translateY(${movie.offset}px)`, opacity: '1' },
      remove: { opacity: '0', transform: `translateY(${movie.offset}px) translateX(200px)` }
    },
    hook: { insert: (vnode) => { movie.elmHeight = vnode.elm.offsetHeight } },
  }, [
    h('div', { style: { fontWeight: 'bold' } }, movie.rank),
    h('div', movie.title),
    h('div', movie.desc),
    h('div.btn.rm-btn', { on: { click: () => { this.remove(movie) } } }, 'x'),
  ]);

  render() {
    const data = [...this.data];
    console.log(data);
    this.data = data.reduce((acc, m) => {
      const last = acc[acc.length - 1]
      console.log(acc, last);
      console.log(last?.elmHeight)
      m.offset = last ? last.offset + last.elmHeight + this.margin : this.margin
      return acc.concat(m)
    }, [])
    this.totalHeight = data.length === 0
      ? 0
      : data[data.length - 1].offset + data[data.length - 1].elmHeight
    this.vnode = this.patch(this.vnode, this.view(data));
  }
}
new Page().render();
